<!--
 * @Date: 2019-08-06 19:03:52
 * @LastEditors: wangsh
 * @Author: wangsh
 * @Description: 学生编辑页
 -->
<template>
  <ms-dialog center-scroll :title="title" :dialog-visible="dialogVisible" @ok="handleSaveStudent" @close="$emit('close')">
    <el-form label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="照片">
        <ms-upload
          file-path="photo"
          @fileList="getFile"
          process-id="1"
          :multiple="true"
          :limit="2"
          :process-list="test"
          list-type="picture-card"
          ref="file1"
        />
      </el-form-item>
      <el-form-item label="性别">
        <ms-dict dict-type="sex" type="checkbox" v-model="form.sex"/>
      </el-form-item>
      <el-form-item label="生日">
        <ms-date-picker v-model="form.birthday" />
      </el-form-item>
      <el-form-item label="档案附件">
        <ms-upload file-path="file" @fileList="getFile" process-id="2" ref="file2">
          <el-button size="small" type="primary">点击上传</el-button>
        </ms-upload>
      </el-form-item>
      <el-form-item label="个人介绍">
        <ms-editor editor-id="detail" v-model="form.detail" ref="detail" />
      </el-form-item>
    </el-form>
  </ms-dialog>
</template>

<script>
import { saveStudent, findStudentById } from '@/api/work/student'
import { filterUploadList } from '@/utils/filterData'
import MsEditor from '@/common/editor/components'
import MsDialog from '@/common/dialog'
import MsUpload from '@/common/upload/components'
import MsDatePicker from '@/common/datePicker'
import MsDict from '@/common/dict/components'
export default {
  components: {
    MsDialog,
    MsUpload,
    MsEditor,
    MsDatePicker,
    MsDict
  },
  props: ['title', 'dialogVisible', 'formId'],
  data() {
    return {
      form: {},
      file: {},
      removeIds: new Set(),
      fileList: new Set(),
      test: []
    }
  },
  watch: {
    form(val) {
      this.$nextTick(() => {
        this.$refs.detail.setHtml(val.detail)
      })
    },
    formId(val) {
      if (val !== '') {
        findStudentById(this.formId).then((res) => {
          const { formFileList, form } = res.obj
          this.form = form
          this.test = formFileList
          // 根据表单位置处理集合
          const fileList = filterUploadList(res.obj.formFileList)
          const refs = this.$refs
          for (const ref in refs) {
            if (ref.indexOf('file') >= 0) {
              const upload = refs[ref]
              const processId = upload.processId
              upload.handleSetFileList(fileList[processId] || [])
            }
          }
        })
      }
    }
  },
  methods: {
    handleSaveStudent() {
      // 附件
      this.form.fileRemoveIds = Array.from(this.removeIds)
      this.form.newFileList = Array.from(this.fileList)
      saveStudent(this.form).then((res) => {
        if (res.obj) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }
        this.$emit('close')
      })
    },
    // 重置表单
    hanleResetFormData() {
      // 清空表单
      this.form = {}

      // 清空富文本编辑器
      this.$refs.detail.setHtml()

      // 清空上传组件数据
      this.file = {}
      this.$refs.photo.handleSetUploadFile([])
      this.$refs.file.handleSetUploadFile([])
    },
    getFile({ newFileList, removeIds }) {
      if (newFileList.length) {
        this.fileList.add(...newFileList)
      }
      if (removeIds.length) {
        this.removeIds.add(...removeIds)
      }
    },
    uploadRef(item) {
      return `file${item}`
    }
  }
}
</script>
